<template>
	<view class="content">

		<view class="add">
			<view class="add-title" @click="goShow">
				<view class="add-title1">
					<view class="add-title2">寄易</view>
					<view class="add-title3">购买 寄售 易物</view>
				</view>
				<view class="add-title-img">
					<image src="../../static/addition/add-imgs1.png" mode=""></image>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#ffffff">
				<uni-popup ref="popup2" :mask-click="false" type="bottom">
					<button @click="close">关闭</button>
					<view class="container">
						<view @click="goImgs()" class="shangchuan">已选照片</view>
						<view class="imgs">

							<view @click.stop="DelImg(i)" class="imgs-btn1" v-for="(item,i) in imgs">
								<button type="default" style="margin-top: 100rpx;" v-if="0">主图</button>
								<uni-icons type="closeempty" class="close" size="20"></uni-icons>

								<image :src="item" mode=""></image>
							</view>
							<view class="imgs-btn2" @click="goConsignment">
								<button type="default">下一步</button>
							</view>
						</view>
						</view>
						<!-- <uni-popup ref="popup2" :mask-click="false" type="bottom">
						     <button @click="close">关闭</button>
							 <view class="container">
							<view @click="goImgs()" class="shangchuan">已选照片</view>
							<view class="imgs">
								
								<view @click.stop="DelImg(i)" class="imgs-btn1" v-for="(item,i) in imgs">
									<button type="default"  style="margin-top: 100rpx;" v-if="0">主图</button>
									<uni-icons type="closeempty" class="close" size="20"></uni-icons>
												
									<image :src="item" mode=""></image>
								</view>
								<view class="imgs-btn2" @click="goConsignment(item)">
									<button type="default">下一步</button>
								</view>
							</view>
							      </view> -->
						 </uni-popup>
			<view class="add-fabu">
				<view class="fabu1" @click="open1(item)" v-for="item in shuju" :key="item.id">
					<view class="fabu1-img">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="fabu1-name">
						{{item.name}}
					</view>
				</view>
			<!-- 	<view class="fabu1" @click="open2">
					<view class="fabu1-img">
						<image src="../../static/addition/add-imgs3.png" mode=""></image>
>>>>>>> Stashed changes
					</view>
				</uni-popup>
				<view class="add-fabu">
					<view class="fabu1" @click="open1">
						<view class="fabu1-img">
							<image src="../../static/addition/add-imgs2.png" mode=""></image>
						</view>
						<view class="fabu1-name">
							免费寄领
						</view>
					</view>
					<view class="fabu1">
						<view class="fabu1-img">
							<image src="../../static/addition/add-imgs3.png" mode=""></image>
						</view>
						<view class="fabu1-name">
							付费寄售
						</view>
					</view>
					<view class="fabu1">
						<view class="fabu1-img">
							<image src="../../static/addition/add-imgs4.png" mode=""></image>
						</view>
						<view class="fabu1-name">
							以物易物
						</view>
					</view>
<<<<<<< Updated upstream
				</view>
=======
				</view> -->
			</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		data() {
			return {

				imgs: '', //添加图片接收
				imgs1: '',
				idto:'',
				imgs2: '',
				enableDel: false,
				enableAdd: false,
				enableDrag: false,
				limitNumber: 8,
				imageData: [],
				formData: {
					userId: 2
				},
				enableDel : false,
				enableAdd : false,
				enableDrag : false,
				limitNumber: 8,
				imageData : [],
				formData: {
				    userId: 2
				},
				shuju:[
					{
						id:'0',
						imgs:'../../static/addition/add-imgs2.png',
						name:'免费寄领'
					},
					{
						id:'1',
						imgs:'../../static/addition/add-imgs3.png',
						name:'付费寄售'
					},
					{
						id:'2',
						imgs:'../../static/addition/add-imgs4.png',
						name:'以物易物'
					}
				]
			};
		},
		components: {
			robbyImageUpload
		},
		onLoad() {
			// this.goShow()

		},
		onShow() {
			this.goShow()

		},
		methods: {
			goConsignment(id) {
				 try{
			     var value = uni.getStorageSync('id');
			     if(value){
			         console.log("const value = uni.getStorageSync('id') 同步获取 = " + value)
			     }
			 }catch(e){
			     //TODO handle the exception
			 };
			 if(value == 0) {
				 uni.navigateTo({
				 	url: './consignment-content?pages='+value
				 })
			 }
			 if(value == '1') {
			 				 uni.navigateTo({
			 				 	url: './consignment-content2?pages='+value
			 				 })
			 }
			 if(value == '2') {
			 				 uni.navigateTo({
			 				 	url: './consignment-content3?pages='+value
			 				 })
			 }
				
			},
			// goShow() {
			// 	setTimeout(() => {
			// 		this.$refs.popup.open('top')
			// 	}, 1000)

			// },
			open1() {
				this.$refs.popup2.open('top')
			},
			close() {
				this.$refs.popup2.close()
			},
			// goImgs() {
			// 	var that = this
			// 	uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
			// 		count: 3, //默认选择1张图片
			// 		sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
			// 		success: (res) => {
			// 			console.log(res.tempFilePaths, '888'); //成功则返回图片的本地文件路径列表 tempFilePaths
			// 			that.imgs = res.tempFilePaths //图片的本地文件路径列表
			// 			// that.imgs1 = res.tempFilePaths[1] 
			// 			// that.imgs2 = res.tempFilePaths[2] 
			// 			console.log(that.imgs, '----------------')
			 goShow(){
				 setTimeout(() => {
					 this.$refs.popup.open('top')
				 },1000)
			        
			      },
				  open2() {
					uni.navigateTo({
						// url: './moni'
					})  
				  },
			 open1(e) {
				 console.log(e.id)
				 this.idto = e.id
				    try{
				 uni.setStorageSync('id', e.id);
				 }catch(e){
				 //TODO handle the exception
				 };
				 console.log(this.idto)
			            this.$refs.popup2.open('top')
			        },
			        close() {
			            this.$refs.popup2.close()
			        },
					goImgs() {
						var that = this
					uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
								count: 3,//默认选择1张图片
								sizeType: ['original', 'compressed'],//original 原图，compressed 压缩图，默认二者都有
								success:  (res)=> {
									console.log(res.tempFilePaths, '888');//成功则返回图片的本地文件路径列表 tempFilePaths
								that.imgs = res.tempFilePaths   //图片的本地文件路径列表
								// that.imgs1 = res.tempFilePaths[1] 
								// that.imgs2 = res.tempFilePaths[2] 
									console.log(that.imgs,'----------------')
								}
							});
					},
					DelImg(i) {
						console.log(i,'索引')
						var i= i
						uni.showModal({
							title: '提示',
							content: '确定要删除照片吗？',
							cancelText: '取消',
							confirmText: '确定',
							success: res => {
								console.log(i)
								if(res.confirm) {
									this.imgs.splice(i, 1)
								}
							}
						})
					// }
				// }
				// )
			},
			DelImg(i) {
				console.log(i, '索引')
				var i = i
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						console.log(i)
						if (res.confirm) {
							this.imgs.splice(i, 1)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 749rpx;
		background-color: #ffffff;

		.add {
			background-color: #ffffff;
			height: 100%;
		}

		.add-title {
			margin: 14rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.add-title1 {
				.add-title2 {
					font-size: 57rpx;
					font-weight: 700;

				}

				.add-title3 {
					margin-top: 10rpx;
					font-size: 25rpx;
				}
			}

			.add-title-img {
				width: 72rpx;
				height: 72rpx;

				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
		}

		// 下面添加区域
		.add-fabu {
			position: fixed;
			bottom: 10%;
			width: 100%;
			display: flex;
			justify-content: row;
			justify-content: space-around;
			background-color: #FFFFFF;
			margin-bottom: 120rpx;

			.fabu1 {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.fabu1-img {
					width: 123rpx;
					height: 123rpx;

					image {
						max-width: 100%;
						max-height: 100%;
					}
				}

				.fabu1-name {
					font-size: 25rpx;
					font-weight: 300;
					margin: 25rpx 10rpx;
				}
			}
		}

		.container {
			background-color: #f5f5f5;
			width: 750rpx;
			height: 391rpx;
		}

		.shangchuan {
			width: 150rpx;
			font-size: 28rpx;
			padding: 10rpx;
		}

		.imgs {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			margin: 25rpx;

			.imgs-btn1 {
				margin: 10rpx;
				width: 141rpx;
				height: 141rpx;
				display: inline;

				image {
					max-width: 100%;
					max-height: 100%;
				}

				.imgs-btn1-btn {
					background-color: #FCDA22;
					width: 141rpx;
					height: 45rpx;
					text-align: center;
					line-height: 45rpx;
					position: absolute;
					z-index: 999;
					font-size: 21rpx;
				}
			}

			.imgs-btn2 {
				margin: 48rpx 41rpx 38rpx 68rpx;

				button {
					border-radius: 36rpx;
					width: 141rpx;
					height: 61rpx;
					line-height: 61rpx;
					text-align: center;
					background-color: #FCDA22;
					font-size: 21rpx;
				}
			}
		}

		.close {
			position: absolute;
			right: 0;
			background-color: #ffffff;
			color: #fff;
		}

	}
</style>
